<template>
  <div class="emailVal-container">
    <el-input size="medium" clearable placeholder="输入邮箱" v-model="email">
      <el-button slot="append" :disabled="sendDisabled" @click="handleSendInputVal">{{ send
        }}</el-button>
    </el-input>
  </div>
</template>

<script>
import { sendEmailAPI } from '@/api/web'
export default {
  props: ['value'],
  data() {
    return {
      send: "发送",
      sendDisabled: false,
      user: {
        email: this.value
      },
      email:this.value
    }
  },
  mounted() { 
    
  },
  watch: {
    //input 输入框的值变化时，触发该方法
    email(newValue) {
      this.user.email = newValue;//给请求的参数重新赋值
      this.$emit('input', newValue);//传递给父组件
    },
  },
  methods: {
    async handleSendInputVal() {
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      if (this.user.email.length == 0) {
        this.$message.error("请输入邮箱");
      } else if (!emailRegex.test(this.user.email)) {
        this.$message.error("邮箱格式不正确");
      } else {
        this.sendDisabled = true;
        // 设置初始倒计时时间  
        let countdown = 60;
        this.send = countdown;
        // 显示倒计时  
        const intervalId = setInterval(() => {
          countdown--;
          if (countdown >= 0) {
            this.send = countdown;
          } else {
            // 倒计时结束后清除定时器  
            clearInterval(intervalId);
            this.send = "发送";
            this.sendDisabled = false;
          }
        }, 1000); // 每秒更新一次 
        const res = await sendEmailAPI(this.user);
        console.log(res);
        if (res.code == 200) {
          this.$message.success("发送成功");
          //禁止发送 
        } else {
          this.$message.error(res.msg);
        }
      }
    },
  }
}
</script>

<style>
.emailVal-container {
  width: auto;
}
</style>
